<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/feiyan.js"></script>
</head>
<body>
    <div class="box" style="width:1200px; height:800px">;
    <script>
        // 获取北京新冠趋势，按时间排序
        var beijin = data.data.feiyan.beijingTrends.sort((a,b)=>a.day-b.day);
        // 初始化
        var mychart = echarts.init(document.querySelector(".box"));
        // 选项
        var option = {
            title:{text:"新冠趋势"},
            tooltip:{
                // 格式提示内容
                formatter(e){
                    //  把日期取后4位+提示文本（可以使用html+css）
                    return e.name.slice(-4)+"<br/>累计确诊:<strong style='font-size:24px'>"+e.value+"</strong>人";
                }
            },
            // 显示工具箱
            toolbox: {
                show: true,
                feature: {
                    // 数据缩放
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    // 数据只读
                    dataView: { readOnly: false },
                    // 魔法类型
                    magicType: { type: ['line', 'bar'] },
                    // 重置
                    restore: {},
                    // 保存图片
                    saveAsImage: {}
                }
            },
            legend:{ data:["北京趋势"]},
            // 把日期映射处理
            xAxis:{data: beijin.map(item=>item.day)},
            yAxis:{},
            series:[
                // 把累计确诊映射出来
                {name:"北京趋势",data:beijin.map(item=>item.rest_sure_cnt),type:'bar'}
            ],
            
        };
        mychart.setOption(option);
        // 默认显示第0条数据
        var index = 0;
        // 自动播放
        function auto(){
            // index加1
            index ++;
            // 超出界限等于0
            if(index>=beijin.length){index= 0}
            // 发送一个显示提示的动作
            mychart.dispatchAction({
                type: 'showTip',            
                position: "top", //提示的位置
                seriesIndex:0,//系列数据
                dataIndex:  index, //数据下标
            })
        }
        // 默认每隔2秒间隔调用自动
        var ind = setInterval(auto,2000);
        // 鼠标移入停止动画
        mychart.on("mouseover",function(){
            clearInterval(ind);
        })
        // 鼠标移出
        mychart.on("mouseout",function(e){
            console.log(e);
            // e.dataIndex 移出位置数据的下标
            // 更新index
            index = e.dataIndex;
            // 执行自动播放
            ind = setInterval(auto,2000);
        })
 
       

    </script>
</body>
</html>